<template>
    <div class="cartcontrol">
        <mu-flexbox>
            <mu-flexbox-item class="flex-demo">
                <transition name="slide-fade">
                    <mu-float-button icon="remove" v-show="food.count>0" mini class="demo-float-button" @click="descount($event)"/>
                </transition>
              </mu-flexbox-item>
            <mu-flexbox-item class="flex-demo">
                <transition name="fade">
                    <div class="count" v-show="food.count>0">{{food.count}}</div>
                </transition>
              </mu-flexbox-item>
            <mu-flexbox-item class="flex-demo">
                <mu-float-button icon="add" mini class="demo-float-button" @click="addcount($event)"/>
              </mu-flexbox-item>
        </mu-flexbox>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default {
    data: function () {
      return {}
    },
    props: {
//      购物车控制组件中只需要加入对应的food对象
      food: {
        type: Object
      }
    },
    methods: {
      addcount ($event) {
//        非移动端才需要返回第二次点击
//        if (!event._constructed) {
//          return
//        }
        if (!this.food.count) {
//          在vue中为对象添加字段的api
          Vue.set(this.food, 'count', 1)
        } else {
          this.food.count++
        }
        console.log('click_add')
      },
      descount ($event) {
        //        非移动端才需要返回第二次点击
//        if (!event._constructed) {
//          return
//        }
        if (this.food.count === 0) {
          return
        }
        this.food.count--
        console.log('click.descont')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/components/cartcontrol.styl"
    .cartcontrol
        height 24px
        font-size 0
        text-align center
        .demo-float-button
            display inline-block
            transform scale(0.5)
            line-height: 24px
            vertical-align top
            &.slide-fade-enter-active, &.slide-fade-leave-active
                transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
            &.slide-fade-enter, &.slide-fade-leave-active
                transform: translateX(10px) scale(0.5)
                opacity: 0
        .count
            display inline-block
            width 12px
            padding-left 16px
            color: rgb(147, 153, 159)
            font-size 10px
            line-height: 24px
            text-align: center
            &.fade-enter-active, &.fade-leave-active
                transition: opacity .5s
            &.fade-enter, &.fade-leave-active
                opacity: 0
</style>
